<template>
  <div class="app-container">
    <!-- 考核模板 -->
    <div class="clearfix">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button
        type="danger"
        :disabled="ids.length === 0"
        @click="(e) => remove()"
      >
        批量删除
      </el-button>
      <el-form class="fr" inline>
        <el-form-item label="姓名">
          <el-input
            placeholder="请输入姓名"
            clearable
            v-model="formInline.personName"
          />
        </el-form-item>
        <el-form-item label="学历">
          <el-select
            placeholder="请选择学历"
            clearable
            v-model="formInline.schoolRecord"
          >
            <el-option label="小学" value="小学"></el-option>
            <el-option label="初中" value="初中"></el-option>
            <el-option label="高中" value="高中"></el-option>
            <el-option label="大专" value="大专"></el-option>
            <el-option label="本科" value="本科"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职称">
          <el-select
            placeholder="请选择职称"
            clearable
            v-model="formInline.technical"
          >
            <el-option
              v-for="(item, index) in personTechnicalList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格信息 -->
    <el-table
      v-loading="listLoading"
      element-loading-text="Loading"
      :data="tableData"
      :header-cell-style="{ background: '#ECF1F9' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column type="index" align="center" label="序号" width="80" />
      <el-table-column prop="personName" align="center" label="姓名" />
      <el-table-column align="center" label="照片" width="80">
        <template slot-scope="{ row }">
          <el-avatar
            shape="circle"
            :size="50"
            :src="row.personPhoto ? row.personPhoto : headImage"
          />
        </template>
      </el-table-column>
      <el-table-column prop="personBirthday" align="center" label="出生年月" />

      <el-table-column prop="personSchoolRecord" align="center" label="学历" />
      <el-table-column
        prop="personProfessional"
        align="center"
        label="专业背景"
      />
      <el-table-column prop="personPost" align="center" label="岗位" />
      <el-table-column prop="personTechnical" align="center" label="职称" />
      <el-table-column fixed="right" align="center" label="操作" width="220">
        <template slot-scope="{ row }">
          <el-button
            type="success"
            size="mini"
            plain
            @click="exportPersonInfo(row)"
            :loading="exportInfoLoading"
          >
            导出
          </el-button>
          <el-button type="primary" size="mini" plain @click="edit(row, 2)">
            编辑
          </el-button>
          <el-button type="danger" size="mini" plain @click="remove(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页信息 -->
    <el-pagination
      style="margin-top: 20px"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 10, 20, 50]"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      @size-change="onPageSizeChange"
      @current-change="onCurrentPageChange"
    />
  </div>
</template>

<script>
import { getPersonList, deletePeople, getPersonInfo } from "@/api2/keyan";
import headImage from "@/assets/keyan/touxiang/touxiang.jpg";

export default {
  name: "researcherList",
  data() {
    return {
      exportInfoLoading: false,
      headImage,
      formInline: {},
      personTechnicalList: [], //职称列表
      pageNum: 1, //当前页
      pageSize: 10, //当前页容量
      total: 0, //总条数
      listLoading: false,
      tableData: [],
      ids: [],
    };
  },
  created() {
    this.getList(); //获取表格数据
  },
  methods: {
    getList() {
      this.listLoading = true;
      const params = {
        ...this.formInline,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      getPersonList(params).then((res) => {
        this.listLoading = false;
        this.tableData = res.data;
        this.total = res.total; //总条数
        let arr = [];
        res.data.forEach((item) => {
          if (!arr.includes(item.personTechnical)) {
            arr.push(item.personTechnical);
          }
        });
        this.personTechnicalList = arr;
      });
    },
    onPageSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    onCurrentPageChange(val) {
      this.pageNum = val;
      this.getList();
    },
    search() {
      this.pageNum = 1;
      this.getList();
    },
    handleSelectionChange(val) {
      const ids = val.map((item) => item.kyPersonId);
      this.ids = ids;
    },
    add() {
      this.$emit("change", { componentName: "researcherDetail", row: {} });
    },
    edit({ kyPersonId }) {
      this.$emit("change", {
        componentName: "researcherDetail",
        rowId: kyPersonId,
      });
    },
    remove(row) {
      this.$confirm("确定删除" + (row ? "此项" : "已选中的") + "数据吗?", {
        type: "warning",
      })
        .then(async () => {
          const ids = row ? row.kyPersonId : this.ids.join();
          await deletePeople(ids);
          this.$message.success("删除成功");
          this.getList();
        })
        .catch(() => {});
    },
    // 导出人员信息
    exportPersonInfo(row) {
      this.exportInfoLoading = true;
      console.log(row.kyPersonId);
      let personId = row.kyPersonId;
      getPersonInfo(personId)
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            let a = document.createElement("a");
            a.href = res.data.url;
            a.style.display = "none";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          }
          this.exportInfoLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.exportInfoLoading = false;
        });
    },
  },
};
</script>
